<template>
    <div class='inExecution'>
        <div class="table1">
            <el-table :data="tableList" border style="width: 600px;"
                :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
                ref='selTable' :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}">
                <el-table-column
                    v-for="(item, i) in tableHeaderList"
                    :label="item.name"
                    :prop="item.label"
                    :width="item.width"
                    :sortable="item.sortable"
                    :fixed="item.fixed"
                    show-overflow-tooltip
                    :key='i'
                >
                </el-table-column>
            </el-table>
        </div>

        <div class="table2">
            <el-table :data="tableList2" border style="width: 600px;"
                :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
                ref='selTable' :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}">
                <el-table-column
                    v-for="(item, i) in tableHeaderList2"
                    :label="item.name"
                    :prop="item.label"
                    :width="item.width"
                    :sortable="item.sortable"
                    :fixed="item.fixed"
                    show-overflow-tooltip
                    :key='i'
                >
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import {
    mpmRuleList
} from '@/api/baseController'
export default {
    data() {
        return {
            tableList: [],
            tableHeaderList: [
                {
                    label: 'index',
                    name: '序号',
                    width: '55',
                },
                {
                    label: 'businessObject',
                    name: '业务对象',
                    width: ''
                },
                {
                    label: 'attribute',
                    name: '属性',
                    width: ''
                }
            ],
            tableList2: [],
            tableHeaderList2: [
                {
                    label: 'level',
                    name: '优先级',
                    width: '60',
                },
                {
                    label: 'combination',
                    name: '绩效维度组合',
                    width: ''
                }
            ]
        }
    },
    mounted() {
        this.getMpmRuleList()
    },
    methods: {
        getMpmRuleList() {
            this.tableList = []
            this.tableList2 = []
            mpmRuleList({}).then(res => {
                if(res.code == 200) {
                    res.data.matchingRules.map((item, i) => {
                        this.tableList.push({
                            index: i + 1,
                            businessObject: item.businessObject,
                            attribute: item.attribute
                        })
                    })
                    res.data.dimensionCombinations.map((item, i) => {
                        this.tableList2.push({
                            level: item.level,
                            combination: item.combination
                        })
                    })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.inExecution {
    .table1 {
        margin-bottom: 20px;
    }
}
</style>